<template>
  <div class="select">
     <div class="cinema-name">
        <div @click="goback"><i class="iconfont icon-xiangzuo"></i></div>
        <span>{{otherinfo.cinema&&otherinfo.cinema.name}}</span>
     </div>
     <div class="film-name">
        <p>{{otherinfo.film&&otherinfo.film.name}}</p>
        <p>
           <span>{{otherinfo&&otherinfo.showAt | day}}</span>
           <span>{{otherinfo&&otherinfo.showAt | time}}</span>
           <span>{{otherinfo.hall&&otherinfo.hall.name}}</span>
         </p>
     </div>

     <div class="seatcont">
        <div class="row-nav">
           <div v-for="(rowcount,index) in row" :key="index">{{rowcount}}</div>
        </div>
        <div class=seat v-for="(item,index) in seat" :key="index" >
           
           <div class="seatdetail" :class="{'changecolor':flag}" :style="{'left':item.columnNum*25 +'px','top':item.rowNum*30 + 'px'}" @click="flag=!flag"></div>
        </div>
     </div>
  </div>

</template>

<script>
import { getSeat, getSeatOtherInfo } from '../../api'
export default {
   data(){
      return {
         sid:'',
         otherinfo:{},
         seat:[],
         row:[],
         flag:false
      }
   },
   created(){
      this.sid = this.$route.query.sid
      console.log(this.sid)
      getSeat(this.sid).then(res=>{
         this.seat = res.data.data.seatingChart.seats
         console.log(this.seat)
         this.seat.forEach((ele)=>{
            var a = ele.rowId
            this.row.push(a)
         })
          var arr=Array.from(new Set(this.row))
          this.row =arr.sort((a,b)=>{return a-b})
         console.log(this.row)
      })
      getSeatOtherInfo(this.sid).then(res=>{
         this.otherinfo = res.data.data.schedule
         console.log(this.otherinfo)
      })
   },
   methods:{
      goback(){
         this.$router.go(-1)
      }
   },
   filters:{
         time(nS){
            return new Date(parseInt(nS) * 1000).toLocaleTimeString().replace(/:\d{1,2}$/,' '); 
         },
         day(nS){
            return new Date(parseInt(nS) * 1000).toLocaleDateString().replace(/:\d{1,2}$/,' '); 

         }
      }

}
</script>

<style>
.select p{
   margin:0;
}
.select .cinema-name{
   height:1rem;
   text-align: center;
   margin-top:0.2rem;
}
.select .cinema-name span{
   font-size:0.35rem;
}
.select .cinema-name i{
   float:left;
}
.select .film-name{
   padding-left:0.2rem;
   height:1rem;
   box-sizing: border-box;
   /* display: flex; */
}
.select .film-name p:nth-child(1){
   font-size:0.3rem;
}
.select .film-name p:nth-child(2){
   color:gray;
}
.select .film-name p:nth-child(2) span{
   margin-right:0.2rem;
}
.select .seatcont{
   width:100%;
   height:10rem;
   position: relative;
   overflow: auto;
}
.select .seatcont .seatdetail{
   width:0.4rem;
   height:0.4rem;
   background:lightgray;
   position: absolute;
   /* display: flex; */

}
.select .row-nav{
   position: absolute;
   top:0.4rem;
   background:rgb(230, 230, 230);
   border-radius: 0.2rem;
   
}
.select .row-nav div{
   /* width:0.2rem; */
   height:0.4rem;
   /* background:gray; */
   margin-top:0.2rem;
   text-align: center;
   color:rgb(255, 160, 176);
}
.changecolor{
   background:purple !important;
}
</style>